/* color */
@clrBlue: 			#2979FF;
@clrDarkBlue:		#2B85E4;
@clrLightBlue: 		#A0CFFF;
@clrWhiteBlue:		#ECF5FF;
@clrRed:			#FA3534;
@clrDarkRed:		#DD6161;
@clrLightRed:		#FAB6B6;
@clrWhiteRed:		#FEF0F0;
@clrOrange:			#FF9900;
@clrDarkOrange:		#F29100;
@clrLightOrange:	#FCBD71;
@clrWhiteOrange:	#FDF6EC;
@clrGreen:			#19BE6B;
@clrDarkGreen:		#18B566;
@clrLightGreen:		#71D5A1;
@clrWhiteGreen:		#DBF1E1;
@clrBlack:			#000000;
@clrWhite:			#FFFFFF;
@clrFont3:			#303133;
@clrFont6:			#606266;
@clrFont9:			#909399;
@clrFontC:			#C0C4CC;
@clrBorder1:		#DCDFE6;
@clrBorder2:		#E4E7ED;
@clrBorder3:		#EBEEF5;
@clrBorder4:		#F2F6FC;
@clrBackground:		#F3F4F6;

/* flex */
.flex(){ display: flex; align-items: center; }
.flex-a() { display: flex; justify-content: space-around; }
.flex-ac(){ display: flex; justify-content: space-around; align-items:center; }
.flex-b() { display: flex; justify-content: space-between; }
.flex-bc(){ display: flex; justify-content: space-between; align-items:center; }
.flex-c() { display: flex; justify-content: center; }
.flex-cc(){ display: flex; justify-content: center; align-items:center; }

/* font-size */
.fs12(){font-size: 12px;}
.fs13(){font-size: 13px;}
.fs14(){font-size: 14px;}
.fs15(){font-size: 15px;}
.fs16(){font-size: 16px;}
.fs17(){font-size: 17px;}
.fs18(){font-size: 18px;}
.fs19(){font-size: 19px;}
.fs20(){font-size: 20px;}
.fs21(){font-size: 21px;}
.fs22(){font-size: 22px;}
.fs23(){font-size: 23px;}
.fs24(){font-size: 24px;}
.fs25(){font-size: 25px;}
.fs26(){font-size: 26px;}
.fs27(){font-size: 27px;}
.fs28(){font-size: 28px;}
.fs29(){font-size: 29px;}
.fs30(){font-size: 30px;}
.fs31(){font-size: 31px;}
.fs32(){font-size: 32px;}
.fs33(){font-size: 33px;}
.fs34(){font-size: 34px;}
.fs35(){font-size: 35px;}
.fs36(){font-size: 36px;}
.fs37(){font-size: 37px;}
.fs38(){font-size: 38px;}
.fs39(){font-size: 39px;}
.fs40(){font-size: 40px;}

/* color */
.clr0(){color: @clrBlack;}
.clr3(){color: @clrFont3;}
.clr6(){color: @clrFont6;}
.clr9(){color: @clrFont9;}
.clrc(){color: @clrFontC;}
.clrw(){color: @clrWhite;}

/* margin */
.ma05(){margin: 5px;}
.ma10(){margin: 10px;}
.ma15(){margin: 15px;}
.ma20(){margin: 20px;}
.ma25(){margin: 25px;}
.ma30(){margin: 30px;}
.ma35(){margin: 35px;}
.ma40(){margin: 40px;}
.ma45(){margin: 45px;}
.ma50(){margin: 50px;}
.ma55(){margin: 55px;}
.ma60(){margin: 60px;}
 
.mb05(){margin-bottom: 5px;}
.mb10(){margin-bottom: 10px;}
.mb15(){margin-bottom: 15px;}
.mb20(){margin-bottom: 20px;}
.mb25(){margin-bottom: 25px;}
.mb30(){margin-bottom: 30px;}
.mb35(){margin-bottom: 35px;}
.mb40(){margin-bottom: 40px;}
.mb45(){margin-bottom: 45px;}
.mb50(){margin-bottom: 50px;}
.mb55(){margin-bottom: 55px;}
.mb60(){margin-bottom: 60px;}

.mt05(){margin-top: 5px;}
.mt10(){margin-top: 10px;}
.mt15(){margin-top: 15px;}
.mt20(){margin-top: 20px;}
.mt25(){margin-top: 25px;}
.mt30(){margin-top: 30px;}
.mt35(){margin-top: 35px;}
.mt40(){margin-top: 40px;}
.mt45(){margin-top: 45px;}
.mt50(){margin-top: 50px;}
.mt55(){margin-top: 55px;}
.mt60(){margin-top: 60px;}

.mr05(){margin-right: 5px;}
.mr10(){margin-right: 10px;}
.mr15(){margin-right: 15px;}
.mr20(){margin-right: 20px;}
.mr25(){margin-right: 25px;}
.mr30(){margin-right: 30px;}
.mr35(){margin-right: 35px;}
.mr40(){margin-right: 40px;}
.mr45(){margin-right: 45px;}
.mr50(){margin-right: 50px;}
.mr55(){margin-right: 55px;}
.mr60(){margin-right: 60px;}

.ml05(){margin-left: 5px;}
.ml10(){margin-left: 10px;}
.ml15(){margin-left: 15px;}
.ml20(){margin-left: 20px;}
.ml25(){margin-left: 25px;}
.ml30(){margin-left: 30px;}
.ml35(){margin-left: 35px;}
.ml40(){margin-left: 40px;}
.ml45(){margin-left: 45px;}
.ml50(){margin-left: 50px;}
.ml55(){margin-left: 55px;}
.ml60(){margin-left: 60px;}

/* padding */
.pa05(){padding: 5px;}
.pa10(){padding: 10px;}
.pa15(){padding: 15px;}
.pa20(){padding: 20px;}
.pa25(){padding: 25px;}
.pa30(){padding: 30px;}
.pa35(){padding: 35px;}
.pa40(){padding: 40px;}
.pa45(){padding: 45px;}
.pa50(){padding: 50px;}
.pa55(){padding: 55px;}
.pa60(){padding: 60px;}
 
.pb05(){padding-bottom: 5px;}
.pb10(){padding-bottom: 10px;}
.pb15(){padding-bottom: 15px;}
.pb20(){padding-bottom: 20px;}
.pb25(){padding-bottom: 25px;}
.pb30(){padding-bottom: 30px;}
.pb35(){padding-bottom: 35px;}
.pb40(){padding-bottom: 40px;}
.pb45(){padding-bottom: 45px;}
.pb50(){padding-bottom: 50px;}
.pb55(){padding-bottom: 55px;}
.pb60(){padding-bottom: 60px;}

.pt05(){padding-top: 5px;}
.pt10(){padding-top: 10px;}
.pt15(){padding-top: 15px;}
.pt20(){padding-top: 20px;}
.pt25(){padding-top: 25px;}
.pt30(){padding-top: 30px;}
.pt35(){padding-top: 35px;}
.pt40(){padding-top: 40px;}
.pt45(){padding-top: 45px;}
.pt50(){padding-top: 50px;}
.pt55(){padding-top: 55px;}
.pt60(){padding-top: 60px;}

.pr05(){padding-right: 5px;}
.pr10(){padding-right: 10px;}
.pr15(){padding-right: 15px;}
.pr20(){padding-right: 20px;}
.pr25(){padding-right: 25px;}
.pr30(){padding-right: 30px;}
.pr35(){padding-right: 35px;}
.pr40(){padding-right: 40px;}
.pr45(){padding-right: 45px;}
.pr50(){padding-right: 50px;}
.pr55(){padding-right: 55px;}
.pr60(){padding-right: 60px;}

.pl05(){padding-left: 5px;}
.pl10(){padding-left: 10px;}
.pl15(){padding-left: 15px;}
.pl20(){padding-left: 20px;}
.pl25(){padding-left: 25px;}
.pl30(){padding-left: 30px;}
.pl35(){padding-left: 35px;}
.pl40(){padding-left: 40px;}
.pl45(){padding-left: 45px;}
.pl50(){padding-left: 50px;}
.pl55(){padding-left: 55px;}
.pl60(){padding-left: 60px;}

/* 动画 */
.ani(){ transition: .2s all ease-in; }
.ani3(){ transition: .3s all ease-in; }
.ani5(){ transition: .5s all ease-in; }
.ani8(){ transition: .8s all ease-in; }
.anit(@ti){ transition: @ti all ease-in; }

.trly(){ .ani; transform: translateY(-2px); }
.trlx(){ .ani; transform: translateX(2px); }

/* other */
.img(){ width: 100%; height: 100%; object-fit: cover; }

.pos-a(){ position: absolute; top:0; right:0; bottom:0; left:0; }
.pos-lt(){ position: absolute; top:0; left:0; }

.shadow(){ box-shadow: 0px 0px 5px -2px rgba(0,0,0,.2); }

.whmax{width: 100%;height: 100%;}

.tac(){text-align: center;}

.fw3(){font-weight: 300;}
.fw5(){font-weight: 500;}
.fw7(){font-weight: 700;}

.wrap(){ width: 100%; position: relative; overflow: hidden; background: @clrBackground;}
.part16(){ max-width: 1600px; width: 100%; margin: 0 auto; }
.part14(){ max-width: 1400px; width: 100%; margin: 0 auto; }
.part12(){ max-width: 1200px; width: 100%; margin: 0 auto; }


/* this website */

